<template>
  <div class="box">
    <div class="box-title">产品标签信息</div>
    <div
      class="box-table"
      :style="{ height: (tableData.length + 1) * 40 + 'px' }"
    >
      <hcTable
        :table-data="tableData"
        :options="tableOptions"
        :columns="tableColumn"
      >
        <template #position="{ row }">
          {{ getPosition(row.position) }}
        </template>
        <template #qaStamp="{ row }">
          {{ row.qaStamp ? "是" : "否" }}
        </template>
        <template #reelType="{ row }">
          {{ getReelType(row.reelType) }}
        </template>
        <template #mergeType="{ row }">
          {{ getMergeType(row.mergeType) }}
        </template>
      </hcTable>
    </div>
  </div>
</template>
<script setup>
import { reelType } from "@/store/editStore";
defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
});

let tableOptions = {
  showPagination: false,
  border: true,
};

let tableColumn = [
  { label: "料号", prop: "code" },

  // { label: "物料描述", prop: "partDesc", showOverflowTooltip: true },
  // { label: "标签类型", prop: "reelType", slot: "reelType" },
  { label: "盘类型", prop: "mergeType", slot: "mergeType" },
  // { label: "长度", prop: "length" },
  // { label: "宽度", prop: "width" },
  { label: "放置位置", prop: "position", slot: "position" },
  { label: "坐标X", prop: "x" },
  { label: "坐标Y", prop: "y" },
  { label: "旋转角度", prop: "angle" },
  { label: "打印模板", prop: "labelTemplate", showOverflowTooltip: true },
  { label: "需要印章", prop: "qaStamp", slot: "qaStamp" },
  { label: "印章料号", prop: "qaStampCode" },
  { label: "印章坐标X", prop: "qaStampX" },
  { label: "印章坐标Y", prop: "qaStampY" },
  { label: "印章角度", prop: "qaStampAngle" },
];

function getReelType(type) {
  let reel = ["其他", "卷盘", "包装袋", "盒子"];
  return reel[type];
}

function getPosition(type) {
  type = type - 0;
  let pos = ["正面", "反面", "顶面", "前面", "底面", "后面", "右面", "左面"];
  return pos[type];
}

function getMergeType(type) {
  let r = "";
  reelType.find((item) => {
    if (item.value == type) {
      r = item.label;
    }
  });
  return r;
}
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  .box-title {
    height: 30px;
    line-height: 30px;
    width: 100%;
    text-align: center;
  }
  .box-table {
    display: flex;
    height: 100%;
    font-size: 14px;
  }
}
</style>
